<template>
  <view class="apply">
    <view class="apply_list">
      <uni-list border-full>
        <uni-list-item title="户号" :rightText="listData.account" />
        <uni-list-item title="租网时长" :rightText="listData.duration" />
        <uni-list-item
          title="支付方式"
          @click="setPopupData('organizationType')"
          link
          :rightText="listData.method"
        />
        <uni-list-item
          title="租网金额"
          :rightText="`${listData.quantity}月X${listData.amount}元=${
            listData.quantity * listData.amount
          }元`"
        />
        <uni-list-item title="租网押金" :rightText="`${listData.deposit}`" />
        <uni-list-item title="实缴总金额" :rightText="listData.paid" />
      </uni-list>
    </view>
    <view class="rent_box">
      <h1 class="rent_title">租金说明</h1>
      <text>
        {{ rent }}
      </text>
    </view>
    <view class="room-btn apartment">
      <button class="btn" @click="broadbandApplication">提交</button>
    </view>
    <up-picker
      :show="show"
      :columns="columns"
      @cancel="show = false"
      @confirm="handelConfirm"
      keyName="label"
    ></up-picker>
  </view>
</template>

<script setup>
import { customNav } from "@/utils/customNav";
import { broadbandApplicationApi } from "@/package_property/pages/api/broadband.js";
import { getDictConfigListByType } from "@/package_property/pages/api/home.js";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
const show = ref(false);
const deposit = ref(0);
const columns = reactive([
  [
    {
      label: "月付",
      id: 1,
    },
    {
      label: "季付",
      id: 3,
    },
    {
      label: "半年付",
      id: 6,
    },
    {
      label: "年付",
      id: 12,
    },
  ],
]);
const listData = ref({
  account: "",
  duration: "至少1年",
  method: "月付",
  amount: 0,
  quantity: 1,
  deposit: 0,
  paid: 0,
});

const rent = ref("");
function setPopupData() {
  show.value = true;
}
function handelConfirm(item) {
  console.log("item", item);
  listData.value.quantity = item.value[0].id;
  listData.value.method = item.value[0].label;
  if (listData.value.quantity == 12) {
    listData.value.deposit = 0;
  } else {
    listData.value.deposit = deposit.value;
  }
  listData.value.paid =
  (listData.value.quantity * listData.value.amount + listData.value.deposit).toFixed(2);
  show.value = false;
}
async function broadbandApplication() {
  let option = {
    deposit: listData.value.deposit + "",
    accountNumber: listData.value.account,
    meetMoney: listData.value.paid,
    monthlyRent: listData.value.amount + "",
    // #ifdef MP-WEIXIN
    payType: "0",
    // #endif
    // #ifdef APP-PLUS || H5
    payType: "1",
    // #endif
    payWay: listData.value.quantity,
    rentTime: listData.value.duration,
  };
  customNav(`agree?details=${JSON.stringify(option)}`);
  // customNav(`apply?details=${JSON.stringify(option)}`);
  // const res = await broadbandApplicationApi(option);
  // const { code, data } = res || {};
  // if (code == 200) {
  //   console.log("data", data);
  //   // #ifdef MP-WEIXIN
  //   weixinClick(data);
  //   // #endif
  //   // #ifdef APP-PLUS || H5
  //   weChatAppPay(data);
  //   // #endif
  // }
}
/**
 * 调微信支付API
 */
const weixinClick = (payData) => {
  uni.requestPayment({
    provider: "wxpay",
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.prepayId,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function (res) {
      if (res.errMsg == "requestPayment:ok") {
        //支付成功，跳转至成功页面
        customNav(`broadband`);
      }
    },
    fail: function (err) {
      if (err.errMsg == "requestPayment:fail cancel")
        return uni.showToast({
          title: "您已取消支付",
          duration: 2000,
          icon: "none",
        });
      uni.showToast({ title: "支付失败", duration: 2000, icon: "none" });
    },
  });
};
// 微信APP支付
const weChatAppPay = (payData) => {
  let params = {
    partnerId: payData.partnerId, //商户号
    prepayId: payData.prepayId, //预支付交易会话ID
    nonceStr: payData.nonceStr, //随机字符串
    timeStamp: payData.timeStamp, //时间戳
    sign: payData.paySign, //签名
  };
  window.mobile.jsCallPayWx(JSON.stringify(params));
  setTimeout(() => {
    customNav(`broadband`);
  }, 1500);
};
// 宽带押金
async function getBroadbandDeposit() {
  const res = await getDictConfigListByType("1830864581099532290");
  const { code, data } = res || {};
  if (code == 200) {
    deposit.value = Number(data[0].children[0].filedName);
    listData.value.deposit = deposit.value;
    getBroadbandMonthlyRent();
  }
}
// 宽带月租
async function getBroadbandMonthlyRent() {
  const res = await getDictConfigListByType("1830864481711304706");
  const { code, data } = res || {};
  if (code == 200) {
    listData.value.amount = Number(data[0].children[0].filedName);
    listData.value.paid =
      (listData.value.quantity * listData.value.amount + listData.value.deposit).toFixed(2);
  }
}
// 租金说明
async function getRentDescription() {
  const res = await getDictConfigListByType("1831580252582195202");
  const { code, data } = res || {};
  if (code == 200) {
    rent.value = data[0].children[0].filedName;
  }
}
onLoad((option) => {
  getRentDescription();
  getBroadbandDeposit();
  listData.value.account = option.room;
});
</script>

<style lang="less" scoped>
.apply_list {
  background: @color-origin-white;
  padding: 30rpx;
  margin-bottom: 50rpx;
}
.rent_box {
  background: @color-origin-white;
  padding: 30rpx;
  font-weight: 400;
  font-size: 23rpx;
  color: @color-grey;
  line-height: 35rpx;
  .rent_title {
    font-weight: 500;
    font-size: 31rpx;
    color: #272636;
  }
}
</style>